<template>
	<div class="orderSure">
        <div class="shopNameHead">
            <img src="../assets/img/about-img1.jpg" alt="" class="shopNameBg">
            <b></b>
            <panel :list="head" class="shopName"></panel> 
            <i>普通预付卡</i>
            <em></em>
        </div>
        <div class="btnTitle">
            <p>选择送给：</p>
        </div>
        <x-button plain class="qq giveBtn" @click.native="giveFriend"><i></i>qq好友</x-button>
        <x-button plain class="giveBtn" @click.native="giveFriend"><b></b>微信好友</x-button>
	</div>
</template>
<script>
	import { Cell, Panel,XInput,XButton,Card , CellFormPreview,FormPreview,Radio, Group} from 'vux'
	export default {
		data (){
			return {
                radio001: [ '自购使用', '赠送好友' ],
                radio001Value: '自购使用',
                head:[{
                    src:'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                    title: '星巴克',
                    desc:'300元',
                    replace: false
                }]
			
			}
		},
		components: {
            Radio, 
            Group,
            FormPreview,
            Cell,
            XInput,
            XButton ,
			Card,
            Panel,
			CellFormPreview 
		},
		methods: {
            giveFriend () {
                this.$router.push('/GiveSuc')	
            },
			saveData: function () {

	let xx = 	{
					"sessionId":"ed852194-ceb9-4316-b3cb-ef972f96d233","cardProductInfo":{"state":"normal","name":"card1","price":"1200","quantity":"3000","expireDate":"360","denomination":"150000","cardType":"normal"}
	}
	this.$http.post(this.$store.state.rests.addCard.url,xx).then(res => {
				console.log(res,"1111")
				}).then(err =>{
					console.error(err);
				})
			}
			
		}
	}
	</script>
<style>
    body{background:#f5f5f9;}
    .orderSure{background-color:#f5f5f9;padding-top:4.5vh;}
    .orderSure .shopNameHead{position:relative; overflow:hidden;}
    .shopNameHead{margin:0 5.9vw 6vh 5.9vw; border-radius:5%;}
    .orderSure .shopName{background-color:rgba(0,0,0,0)}
    .orderSure .shopNameHead .shopNameBg{position:absolute; top:0; left:0; width:100%; height:100%;filter: blur(3px);}
    .shopName .weui-media-box__bd .weui-media-box__title{height:5.2vh; line-height:5.2vh; margin:0; font-size:4.5vw;}
    .shopName .weui-media-box__bd .weui-media-box__desc{height:6.7vh; line-height:6.7vh; margin:0; font-size:8vw; color:#1a1a1a; margin-bottom:2.2vh;}
    .shopName img{border-radius:50%;}
    .orderSure .weui-panel:before{border:0;}
    .orderSure .shopName .weui-media-box__hd{width:25.3vw; height:25.3vw; margin:0;display:inline-block;}
    .shopName .weui-media-box{display:block; text-align:center; padding:0; padding-top:3vh;}
    .orderSure .shopNameHead b{width:100%; height:100%; background:rgba(255,255,255,.4); position:absolute; top:0; left: 0;}
    .orderSure .shopNameHead i{width:8vw; height:21.8vh; background-image:url(../assets/img/img_biao@2x.png); background-repeat:no-repeat; background-size:8vw 21.8vh; background-position:top left; position:absolute; top:0; left: 0; font-size:2vh; color:#fff; font-style:normal; letter-spacing:2vw; padding-left:2vw; padding-top:5vw; line-height:2.4vh;}
    .orderSure .btnTitle p{line-height:6.7vh; font-size:2vh; height:6.7vh; margin:0; margin-left:5.3vw; border-bottom:1px solid #d7d7d7; padding-left:1vw;}
    .orderSure .giveBtn{width:85.6vw; height:6.7vh; margin:0 auto; background:#fff; color:#000; font-size:4vw; border:0;}
    .orderSure .giveBtn i{background-image:url(../assets/img/icon_qq@2x.png); background-repeat:no-repeat; background-size:cover; background-position:center; width:4vw; height:2.9vh ;display:inline-block;vertical-align:middle; margin-right:2vw;}
    .orderSure .giveBtn b{background-image:url(../assets/img/icon_chat@2x.png); background-repeat:no-repeat; background-size:cover; background-position:center; width:5.7vw; height:2.6vh ;display:inline-block;vertical-align:middle; margin-right:2vw;}
    .orderSure .shopNameHead em{background-image:url(../assets/img/icon_gift@2x.png); background-repeat:no-repeat; background-size:cover; background-position:center; width:4vw; height:2.5vh ;display:inline-block;vertical-align:middle; position:absolute; bottom:4.2vh ; left:29%; }
    .orderSure .qq{margin:5.3vw auto;}
    .orderSure .weui-btn:after{border:0;}
</style>
